<template>
    <div>
        <div @click="openDialog" class="insertBox">+</div>
        <el-calendar v-model="value" @input="handleChange(value)">
            <template slot="dateCell" slot-scope="scope">
                <div :class="getCellStyle(scope.date)">
                    <div>{{ scope.date.getDate() }}</div>
                    <!-- 显示用餐信息 -->
                    <div>


                    </div>
                    <div style="color:#248df5;">{{ getEvents(scope.date) }}</div>
                    <!--          <div v-if="getEvents(scope.date)" style="color:#248df5;">{{ getEvents(scope.date) }}</div>-->
                </div>
            </template>
        </el-calendar>
        <el-dialog title="订餐信息" :visible.sync="dialogFormVisible" center>
            <el-form :model="form">
                <el-form-item label="预订人">
                    <el-input v-model="form.bookingName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label=" 人数">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预定餐">
                    <el-radio-group v-model="form.eatTime ">
                        <el-radio label="中餐"></el-radio>
                        <el-radio label="晚餐"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="餐标">
                    <el-select v-model="form.mealLabel" placeholder="请选择活动区域">
                        <el-option label="餐标一" value="one"></el-option>
                        <el-option label="餐标二" value="two"></el-option>
                        <el-option label="餐标三" value="three"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
        <div class="orderBox" v-for="(item,index) in activeDetails" :key="index">
            <div class="orderName">
                <div>订餐人：</div>
                <div>{{ item.bookingName }}</div>
            </div>
            <div class="orderName">
                <div>订餐时间：</div>
                <div>{{ item.bookingTime }}</div>
            </div>
            <div class="orderName">
                <div>订餐人数：</div>
                <div>{{ item.number }}</div>
            </div>
            <div class="orderName">
                <div>餐标：</div>
                <div>{{ item.mealLabel }}</div>
            </div>
        </div>
<div class="orderBoxNo" v-if="activeDetails.length===0"
    >暂无预定信息</div>
    </div>
</template>

<script>
    import {bookInsert, bookList} from "@/config/api";

    export default {
        data() {
            return {
                value: new Date(),
                selectedDates: [],
                dialogFormVisible: false,
                form: {
                    bookingName: "",
                    number: '',
                    bookingTime: '',
                    mealLabel: '',
                    eatTime: ''
                },
                activeday: [],
                activeDetails: []
            };
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList() {
                bookList(this.form).then(res => {
                        if (res.length > 0) {
                            this.activeday = res
                            this.handleChange(this.value)
                        } else {
                            this.activeDetails = []
                        }
                    }
                )
            },
            submit() {
                this.dialogFormVisible = false
                bookInsert(this.form).then(res => {
                        if (res===1) {
                          this.$message.success('新增成功');
                          this.form.bookingTime=''
                          this.getList()
                        } else {
                          return false
                        }
                    }
                )
                this.form={
                    bookingName: "",
                    number: '',
                    bookingTime: '',
                    mealLabel: '',
                    eatTime: ''
                }
            },
            handleChange(value) {
                this.value = value;
                this.form.bookingTime = this.formatDate(value)
                bookList(this.form).then(res => {
                        if (res.length > 0) {
                            this.activeDetails = res
                        } else {
                            this.activeDetails = []
                        }
                    }
                )
            },
            getEvents(date) {
                let dateString = this.formatDate(date);
                let result = ''; // 初始化一个空字符串用于存储结果
                for (let item of this.activeday) {
                    if (item.bookingTime === dateString) {
                        result += item.eatTime + '\n'; // 使用换行符作为分隔符
                    }
                }
                // 返回结果，注意这里不再需要去除结尾的分隔符
                return result;
            },
            formatDate(date) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
            },
            openDialog() {
                this.dialogFormVisible = true;
            },
            isDateSelected(date) {
                return this.selectedDates.some(selectedDate => {
                    selectedDate.getTime() === date.getTime()
                });
            },
            getCellStyle(date) {
                if (this.isDateSelected(date)) {
                    return 'is-selected';
                }
                return '';
            }
        }
    };
</script>

<style>
    .orderBoxNo{
        border: 1px solid #eeeeee;
        box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
        margin: 10px 20px;
        padding: 10px;
        text-align: center;
        line-height: 30px;
    }
    .insertBox {
        font-size: 30px;
        display: flex;
        justify-content: end;
        margin-right: 30px;
    }

    .el-calendar-table .el-calendar-day {
        box-sizing: border-box;
        padding: 8px;
        height: 75px !important;
    }

    .is-selected {
        color: #248df5;
    }

    .orderName {
        display: flex;
    }

    .orderBox {
        border: 1px solid #eeeeee;
        box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
        margin: 10px 20px;
        padding: 10px;
    }
</style>
